@charset "UTF-8";
* {
  /* 初始化 取消页面元素内外边距 */
  margin: 0;
  padding: 0;
}

body {
  background-color: #222;
  /* 弹性布局 水平、垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 100%窗口高度 */
  height: 100vh;
}

h1 {
  color: #333;
  /* 转大写 */
  text-transform: uppercase;
  font-size: 112px;
  /* 相对定位 */
  position: relative;
}
h1::after {
  content: "helloworld";
  /* 颜色为透明 */
  color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #ff69b3, #fe0000, #ffa401, #ffff01, #008102, #40e1d2, #410098, #9400d4);
  /* 以文字的范围来裁剪背景图片 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 执行动画（动画 时长 infinite表示无限次播放） */
  -webkit-animation: light 5s infinite;
          animation: light 5s infinite;
}

@-webkit-keyframes light {
  0% {
    -webkit-clip-path: circle(100px at 0% 50%);
            clip-path: circle(100px at 0% 50%);
  }
  50% {
    -webkit-clip-path: circle(100px at 100% 50%);
            clip-path: circle(100px at 100% 50%);
  }
  100% {
    -webkit-clip-path: circle(100px at 0% 50%);
            clip-path: circle(100px at 0% 50%);
  }
}

@keyframes light {
  0% {
    -webkit-clip-path: circle(100px at 0% 50%);
            clip-path: circle(100px at 0% 50%);
  }
  50% {
    -webkit-clip-path: circle(100px at 100% 50%);
            clip-path: circle(100px at 100% 50%);
  }
  100% {
    -webkit-clip-path: circle(100px at 0% 50%);
            clip-path: circle(100px at 0% 50%);
  }
}/*# sourceMappingURL=index.css.map */